<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css"
  href="http://latex.codecogs.com/css/equation-embed.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://latex.codecogs.com/css/ie6.css" type="text/css"/>
<![endif]-->
<script type="text/javascript" 
  src="http://latex.codecogs.com/js/eq_config.js" ></script>
<script type="text/javascript" 
  src="http://latex.codecogs.com/js/eq_editor-lite-11.js" ></script>

  
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" >
	</script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
	<script src="shapes.js"></script>
</head>

<body>

<div style="position:relative;">
<p><h1>Awesome drawing application</h1> 
<input type="button" onclick="setRect()" value="Rectangle"/>
<input type="button" onclick="setLine()" value="Line"/>
<input type="button" onclick="setCircle()" value="Circle"/>
<input type="button" onclick="setPen()" value="Pen"/>
<input type="button" onclick="setText()" value="Text"/>
<input type="button" onclick="setEquation()" value="Equation"/>
<input type="button" onclick="Moveable()" value="Move"/>
<input type="button" id="undo" value="Undo"/>
<input type="button" id="redo" value="Redo"/>
<input type="button" id="save" value="Save"/>
</p>


<div>
<canvas style ="border:1px solid"  id="theCanvas" width="800" height="400">
	<p>No support for canvas, sorry</p>
</canvas>
<select multiple="multiple" id="templateSelect">

</select>

<script id="templateTemplate" type="text/html">
	<option value='${ID}'>${WhiteboardTitle}</option>
</script>
</div>
<textarea name="text"id="text" style="display:none; position:absolute;" >Insert Text</textarea>
<br/>
<label for="newBorder">Color: </label>
<select id="newBorder" onchange="setBorder()">
<option selected="selected" value="black">Black </option>
<option value="white">White </option>
<option value="red">Red </option>
<option value="green">Green </option>
<option value="blue">Blue </option>
</select>
<label for="newFill">Fill: </label>
<select id="newFill" onchange="setFill()">
<option selected="selected" value="noFill">No fill</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
<label for="newFont">Font: </label>
<select id="newFont">
<option selected="selected" value="calibri">Calibri</option>
<option value="arial">Arial</option>
<option value="verdana">Verdana</option>
<option value="courier">Courier</option>
</select>

<label for="newSize">Font size: </label>
<select id="newSize" onchange="setSize()">
<option selected="selected" value="10pt">10</option>
<option value="20pt">20</option>
<option value="30pt">30</option>
<option value="40pt">40</option>
</select>

<label for="newLineSize">Line size: </label>
<select id="newLineSize" onchange="setLineSize()">
<option selected="selected" value="1">1</option>
<option value="4">4</option>
<option value="8">8</option>
<option value="10">10</option>
</select>





<p id="message"></p>
<div id="editor" style="display:none; position:absolute;"> 	
</div>

<div id="preview" style="display:none; position:absolute;">
		<p>
			Equation preview:
		</p>
		<p>
			<img id="equation" />
		</p>
	</div>

<textarea id="eqEditor" rows="3" cols="40" style="display:none; position:absolute;"></textarea>


<script type="text/javascript">
	EqEditor.embed('editor')
	var a=new EqTextArea('equation', 'eqEditor');
	EqEditor.add(a,false);
</script>


</body>



</html>